<template>
	<view class="warp-login">
		<view class="warp-login__title">欢迎新用户注册</view>
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="formData" labelWidth="80" labelAlign="right">
			<u-form-item label="登录账号" prop="username" borderBottom ref="item1" >
				<u--input v-model="formData.username" border="none" clearable></u--input>
			</u-form-item>
			<u-form-item label="登录密码" prop="password" borderBottom ref="item1" >
				<u--input type="password" v-model="formData.password" border="none" clearable></u--input>
			</u-form-item>
			<u-form-item label="确认密码" prop="user_pwd2" borderBottom ref="item1" >
				<u--input type="password" v-model="formData.user_pwd2" border="none" clearable></u--input>
			</u-form-item>
			<view class="warp-login__but">
				<u-button type="error" text="立即注册" @click="onSubmit"></u-button>
				<view class="warp-login__but-reg" @click="toLogin">已有账号？立即登录</view>
			</view>
		</u--form>
		
	</view>
</template>

<script>
	import { register} from '@/api/user.js'
	export default {
		data() {
			return {
				formData:{
					username:'',
					password:'',
					user_pwd2:'',
					user_random:''
				},
				rules:{
					username: [
						{
							required: true,
							message: '请填写用户名',
							trigger: ['blur', 'change']
						}
					],
					password: [
						{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 16,
							message: '密码长度在6-16个字符之间'
						}
					],
					user_pwd2:[
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return (value === this.formData.password);
							},
							message: '两次密码输入不一致',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onLoad(opt){
		},
		onReady(){
			this.$refs.formData.setRules(this.rules);
		},
		methods: {
			toLogin(){
				uni.$u.route({
					url:'pages/login/login',
					params:{
						random : this.formData.user_random
					}
				})
			},
			onSubmit(){
				this.$refs.formData.validate().then(res => {
					register(this.formData).then(res=>{
						if(res.code === 200) {
							uni.$u.toast(res.message);
							setTimeout(()=>{
								this.toLogin();
							},1500);
						}else{
							uni.$u.toast(res.message);
						}
					}).catch(err=>{
						uni.$u.toast(`页面错误！${JSON.stringify(err)}`);
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss">
	.warp-login{
		padding: 20rpx;
		&__title{
			font-size: 45rpx;
			line-height: 45rpx;
			padding: 30rpx 0 50rpx 0;
		}
		&__but{
			padding: 80rpx 0;
		}
		&__but-reg{
			font-size: 26rpx;
			line-height: 60rpx;
			text-align: center;
			margin-top: 20rpx;
			color: $u-primary;
		}
		&__grid{
			align-items: center;
			justify-content: center;
			position: relative;
			flex-direction: column;
			box-sizing: border-box;
			display: flex;
			&__text{
				margin-top:10rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: $u-content-color;
			}
		}
		&__footer{
			position: fixed;
			bottom: 20rpx;
			left: 0;
			right: 0;
			text-align: right;
			font-size: 24rpx;
			padding: 10rpx 30rpx;
			&__text{
				color: $u-primary;
				font-weight: bold;
			}
		}
	}
	
</style>
